import React, {Component} from 'react';
import {Actions} from 'react-native-router-flux'
import {
  StyleSheet,
  View,
  Text,
  Button,
  TouchableOpacity,
} from 'react-native';
import Colors from '../../assets/colors'

const Btn = props => {
  return (
    <TouchableOpacity onPress={()=>{
      if(props.title=='签到'){
        Actions.push('SignIn')
      }else if(props.title=='下发整改单'){
        Actions.push('RectifyBill')
      }else if(props.title=='签退'){
        Actions.push('SignOut')
      }
    }}>
      <View style={styles.BtnContainer}>
        <Text style={styles.btnText}>{props.title}</Text>
      </View>
    </TouchableOpacity>
  )
}

export default class App extends Component<{}> {

  render() {

    return (
      <View style={styles.container}>
        <Btn title="签到"/>
        <Btn title="台账"/>
        <Btn title="下发整改单"/>
        <Btn title="签退"/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center',
    // flexDirection: 'row',
  },
  BtnContainer: {
    marginTop: 30,
    backgroundColor: Colors.btnPrimaryBg,
    paddingTop: 10,
    paddingBottom: 10,
    paddingLeft: 20,
    paddingRight: 20,
    borderRadius: 5,
  },
  btnText: {
    color: '#fff',
    fontSize: 26,
  }
});